<template>
  <el-container>
    <el-container>
      <el-header style="line-height: 30px; height: 30px;">
        <el-form ref="queryData" :model="queryData" inline size="mini" style="height: 30px;">
          <el-form-item prop="roleName">
            <el-input v-model="queryData.roleName" placeholder="角色名称" style="width: 120px;" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain icon="el-icon-search" size="mini" @click="queryPageList">查询</el-button>
            <el-button type="info" icon="el-icon-refresh" size="mini" @click="reset('queryData')">重置</el-button>
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addSysRole">新增角色</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-table v-loading="loading" :data="pageTableData" border size="small" max-height="700">
          <el-table-column label="ID" prop="id" header-align="center" align="center" width="65" />
          <el-table-column label="角色" prop="roleName" header-align="center" align="center" width="130" />
          <el-table-column label="权限字符" prop="roleKey" header-align="center" align="center" width="130" />
          <!--          <el-table-column label="状态" prop="status" header-align="center" align="center" width="80">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-tag size="small" :type="scope.row.status ? 'success' : 'primary'">{{ statusMap[scope.row.status] }}</el-tag>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column label="描述" prop="description" header-align="center" align="center" min-width="260" />
          <el-table-column label="操作" fixed="right" header-align="center" align="center" min-width="120">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-edit"
                @click="updateSysRole(scope.row)"
              >编辑</el-button>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-close"
                @click="deleteSysRole(scope.row)"
              >删除</el-button>
              <!--              <el-button-->
              <!--                v-if="!scope.row.status"-->
              <!--                type="text"-->
              <!--                size="mini"-->
              <!--                icon="el-icon-check"-->
              <!--                @click="statusChange(scope.row)"-->
              <!--              >启用</el-button>-->
              <!--              <el-button-->
              <!--                v-if="scope.row.status"-->
              <!--                type="text"-->
              <!--                size="mini"-->
              <!--                icon="el-icon-close"-->
              <!--                @click="statusChange(scope.row)"-->
              <!--              >禁用</el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer style="text-align: right">
        <el-pagination
          :current-page="queryData.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryData.totalCount"
          @size-change="pageSizeChange"
          @current-change="pageCurrentChange"
        />
      </el-footer>
    </el-container>
    <el-aside width="400px">
      <el-card>
        <div slot="header" class="clearfix">
          <span>{{ roleFormTitle }}</span>
        </div>
        <el-form
          ref="roleForm"
          v-loading="formLoading"
          :model="roleForm"
          :rules="rules"
          size="mini"
          label-width="80px"
          style="width: 320px;"
        >
          <el-form-item label="角色：" prop="id" hidden>
            <el-input v-model="roleForm.id" />
          </el-form-item>
          <el-form-item label="角色：" prop="roleName">
            <el-input v-model="roleForm.roleName" placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="权限字符：" prop="roleKey">
            <el-input v-model="roleForm.roleKey" placeholder="请输入角色的权限字符" />
          </el-form-item>
          <el-form-item label="描述：" prop="description">
            <el-input v-model="roleForm.description" type="textarea" placeholder="请输入角色描述" />
          </el-form-item>
          <el-form-item label="菜单：" prop="menuIds">
            <el-tree
              ref="menuIds"
              :data="menuList"
              show-checkbox
              default-expand-all
              node-key="menuId"
              highlight-current
              :props="{
                children: 'children',
                label: 'title'
              }"
              @check-change="menuTreeCheckChange"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
            <el-button @click="onRoleFormRest">取消</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-aside>
  </el-container>
</template>

<script>
import { sysAjax } from 'Ajax'

export default {
  name: 'SysRole',
  data() {
    return {
      loading: false,
      formLoading: false,
      queryData: {
        pageNum: 1,
        pageSize: 10,
        totalCount: 0
      },
      pageTableData: [],
      statusMap: { false: '禁用', true: '启用' },
      menuList: [],
      roleFormTitle: '新建角色',
      roleForm: {},
      rules: {
        roleName: [{ required: true, message: '角色名称不能为空' }],
        menuIds: [{ required: true, message: '请至少勾选一个菜单' }]
      }
    }
  },
  created() {
    this.queryPageList()
    sysAjax.allMenuTree().then(data => {
      this.menuList = data
      // console.log('menuList', this.menuList)
    })
  },
  methods: {
    reset(formName) {
      this.$refs[formName].resetFields()
      this.queryPageList()
    },
    queryPageList() {
      this.loading = true
      sysAjax.sysRolePageList(this.queryData).then(response => {
        this.pageTableData = response.list
        this.queryData.pageNum = response.currPage
        this.queryData.pageSize = response.pageSize
        this.queryData.totalCount = response.totalCount
        this.loading = false

        this.onRoleFormRest()
      })
    },
    pageChange(pageNo, pageSize) {
      this.queryData.pageNum = pageNo
      this.queryData.pageSize = pageSize
      this.queryPageList()
    },
    pageSizeChange(val) {
      this.queryData.pageSize = val
      this.queryPageList()
    },
    pageCurrentChange(val) {
      this.queryData.pageNum = val
      this.queryPageList()
    },
    addSysRole() {
      this.onRoleFormRest()
    },
    deleteSysRole(row) {
      this.$confirm('是否确认删除角色【' + row.roleName + '】?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sysAjax.deleteSysRole({ 'id': row.id }).then((res) => {
          this.msgSuccess('删除成功')
          this.queryPageList()
        })
      }).catch(() => {})
    },
    updateSysRole(row) {
      // console.log('row', row)
      this.roleFormTitle = '编辑角色【' + row.roleName + '】'
      this.roleForm = {
        id: row.id,
        roleName: row.roleName,
        roleKey: row.roleKey,
        menuIds: row.menuIds,
        description: row.description
      }
      this.$refs.menuIds.setCheckedKeys(row.menuIds)
    },
    menuTreeCheckChange() {
      this.$set(this.roleForm, 'menuIds', this.$refs.menuIds.getCheckedKeys())
    },
    onSubmit() {
      this.$refs.roleForm.validate((valid) => {
        if (valid) {
          // console.log('menuIds', this.$refs.menuIds.getCheckedKeys())
          console.log('roleForm', this.roleForm)
          this.formLoading = true
          if (this.roleForm.id === undefined) {
            sysAjax.sysRoleAdd(this.roleForm).then(() => {
              this.formLoading = false
              this.msgSuccess('角色添加成功')
              // 设置延迟执行
              this.timer = setTimeout(() => {
                this.queryPageList()
              }, 500)
            }).catch(() => {
              this.formLoading = false
            })
          } else {
            sysAjax.sysRoleUpdate(this.roleForm).then(() => {
              this.formLoading = false
              this.msgSuccess('角色修改成功')
              // 设置延迟执行
              this.timer = setTimeout(() => {
                this.queryPageList()
              }, 500)
            }).catch(() => {
              this.formLoading = false
            })
          }
        }
      })
    },
    onRoleFormRest() {
      this.roleFormTitle = '新增角色'
      this.$refs.roleForm.resetFields()
      this.$refs.menuIds.setCheckedKeys([])
    }
  }
}
</script>

<style scoped>
/deep/ .el-form-item__label {
  font-size: 13px;
  font-weight: 500;
}
</style>
